<template>
  <div class="Content">

    <div class="list" v-for="(item,index) in contents" v-on:click="gotoAddress('/content/article/'+item.article_id)">
      <!--{{item.article_id}}-->
      <div class="img">
        <img class="imgli" :src="item.cover" v-if="item.cover" />
      </div>
      <div class="clearfix top-font">
        <div class="fl">
          <!--<div class="ico" v-if="item.is_top == 1">置顶</div>-->
          <!--<div class="ico" v-if="!(item.is_top == 1)">原创</div>-->
          <div class="ico" v-if="index == 0">置顶</div>
          <div class="ico" v-else>原创</div>
        </div>
        <div class="fr">
          <div class="font">{{item.subject}}</div>
        </div>
      </div>
      <div class="clearfix auth-box">
        <div class="fl">
          <span class="name">{{item.author}}</span>
          <i v-if="item.author">|</i>
          <span class="time">{{item.date_added}}</span>
        </div>
        <div class="fr">
          <!--<img src="../assets/search/a3.png" class="follow" alt="" /><i>{{item.zantimes}}</i>-->
          <img src="../assets/search/a4.png" class="pinglun" alt="" /><i>{{item.commenttimes}}</i>
        </div>
      </div>
    </div>

    <foot-guide></foot-guide>
  </div>
</template>

<script>
import footGuide from '../components/footGuide'
import { Toast } from 'mint-ui';
import { Indicator } from 'mint-ui';


export default {
  name: 'Content',
  data () {
    return {
      msg: 'reg',
      contents:[]
    }
  },
  methods:{
    shoucang:function(){

      var isLogin = sessionStorage.user && JSON.parse(sessionStorage.user).login || 0;
      if(!isLogin){
        alert(1)
        this.$router.push({path:'login',query: {redirect: '/content'}});
      }
      else{
        alert(2)
      }

    },
    gotoAddress(path){
         this.$router.push(path)
       },
    getContents:function(){
      var ajaxData = {};
      var _this = this;
      Indicator.open("内容更新中...");
      $.ajax({
        type:'post',
        url: RouteMap.getContents,
        data: ajaxData,
        success:function(res){
          Indicator.close();
          if(res.code == 200) {

            _this.contents = res.data.list;
          }
          else{
            //Toast(res.msg)
          }
        },
        error(){
            Indicator.close();
            Toast("获取信息失败")
        }
      })
    }
  },
  mounted:function() {
    this.getContents()
  },
    components: {
      footGuide
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .Content{
    background: #eee;
    padding-bottom: 2rem;
  }
  .list{
    background: #fff;
    margin-bottom: 0.5rem;
  }
  .top-font{
    padding: .5rem .7rem;
    font-size: .9rem;
    color: #1B1B1B;
  }

  .top-font .fl{
    width: 2rem;
  }
  .top-font .fr{
    width:12rem ;
  }
  .imgli{
    width: 100%;
  }
  .auth-box{
    padding: 0 .7rem .5rem;
    font-size: .55rem;
    color: #707070;
  }
  .auth-box .fr i,.auth-box .fr img{
    vertical-align: middle;
  }
  .ico{
    width: 2rem;
    height: 2rem;
    background: url("../assets/content/ico.png");
    background-size: 100% 100%;
    font-size: .5rem;
    text-align: center;
    line-height: 2rem;
    color: #fff;
  }
  .auth-box .follow{
    display: inline-block;
    width: 0.6rem;
    margin-right: 0.2rem;
  }
  .auth-box .pinglun{
    display: inline-block;
    width: 0.5rem;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
  }

  .font{
    word-wrap:break-word;
  }
/*.banner{*/
      /*box-sizing:border-box;*/
      /*border:1rem solid #999;*/
/*}*/
/*.banner .icon{width:100%;*/
  /*height:9rem;*/
/*}*/


/*.article{*/
      /*background:#fff;*/
      /*width:100%;*/
      /*box-sizing:border-box;*/
      /*padding:.4rem .5rem .4rem .5rem;*/
      /*border-bottom: 1px solid #eee;*/
      /*font-size:.6rem;*/
/*}*/
/*.article div{*/
      /*padding-top:.5rem;*/
/*}*/
/*.article div p{*/
      /*line-height:1rem;*/
      /*}*/
/*.article .zan{*/
      /*padding-left:1.2rem;*/
      /*padding-right:.2rem;*/

      /*background:url(https://dummyimage.com/30x30)no-repeat;*/
      /*background-size:1rem 1rem;*/
/*}*/

/*.article .msg{*/

      /*padding-left:1.2rem;*/
      /*background:url(https://dummyimage.com/30x30)no-repeat;*/
      /*background-size:1rem 1rem;*/
/*}*/



</style>
